<template>
	<view class="animated fadeIn faster">
		    <view class="px-3 pt-2">
				<view class="d-flex d-flex-middle d-flex-center" style="background-color: #eeeeee;border-radius: 50rpx;height: 64rpx;">
					<text class="colorf00 font22">谨防诈骗、请勿相信任何私下交易、存单、代打</text>
				</view>
			</view>
    <view class="d-flex">
      <button class="d-flex d-flex-item" open-type="contact" style="padding:0;height: 145rpx;border: none; outline: none; background: none; padding: 0;">
        <view class="avatar" style="padding-top: 10rpx;">
          <image class="rounded" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/tem-car-img/myuser.png" mode="aspectFill" style="width: 100rpx;height: 100rpx;"></image>
        </view>
        <view class="callinfo d-flex-item d-flex d-flex-middle">
          <text class="font32">在线客服</text>
        </view>
      </button>
      <view class="d-flex-item d-flex d-flex-middle" @click="goUrl('/subPages/systemMessages/systemMessages')">
        <image class="ml-3"  src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/ch/yxx.png"  style="width: 76rpx;height: 76rpx;"></image>
        <text class="ml-3 font32">系统消息</text>
      </view>
    </view>

			<view style="height: 12rpx;background-color: #f4f6fa;" v-if="conversationList.length>0"></view>
			<view class="d-flex" style="height: 145rpx;" v-for="item in conversationList" :key="item._id" @click="toChat(item.id)" @longpress="remove(item.id)">
				<view class="avatar position-relative">
					<image v-if="item.avatar_file.url" class="rounded15" :src="item.avatar_file.url" mode="aspectFill" style="width: 100rpx;height: 100rpx;"></image>
					<view class="info-num d-flex d-flex-center d-flex-middle" v-if="item.unread_count>0">
						<text class="font22 colorfff">{{item.unread_count}}</text>
					</view>
				</view>
				<view class="callinfo d-flex-item d-flex-column d-flex-center">
					<view class="d-flex d-flex-between d-flex-middle mb-1">
						<text class="font32">{{item.title}}</text>
						<text class="font24 colorb0">{{friendlyTime(item.time)}}</text>
					</view>
					<view class="d-flex d-flex-between d-flex-middle text-clamp">
						<text class="font26 colorb0">{{item.note}}</text>
					</view>
				</view>
			</view>
			<!-- <view class="d-flex d-flex-center d-flex-middle" style="height: 60rpx;background-color: #eeeeee;" @click="onleyClick()">测试会话</view> -->
			<!-- <view class="d-flex d-flex-column d-flex-middle d-flex-center" style="padding-top: 350rpx;" v-if="conversationList.length == 0">
				<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/no-msg.png" style="width: 244rpx;height: 160rpx;margin-bottom: 20rpx;"></image>
				<text class="colorhold font26">~暂无会话消息~</text>
			</view> -->
	</view>
</template>
<script>
import {
  mapState
} from "vuex"
	import uniIm from '@/uni_modules/uni-im/sdk/index.js';
	export default {
		data() {
			return {
			}
		},
		computed: {
    ...mapState({
      loginState: state => state.loginState,
    }),
			unreadMsgCount(){
				return uniIm.conversation.unreadCount()
			},
			conversationList() {
				const conversationList = uniIm.conversation.dataList
				return conversationList
			},
			friendlyTime:function() {
				return function(ctime){
					let timestamp = ctime + uniIm.heartbeat * 0
					let friendlyTime = uniIm.utils.toFriendlyTime(timestamp)
					let friendlyTimeArr = friendlyTime.split(' ')
					let friendlyTimeArrL = friendlyTimeArr.length
					if (friendlyTimeArrL == 3 && friendlyTime.includes('/')) {
						friendlyTime = friendlyTimeArr[0]
					}
					return friendlyTime
				}
			}
		},
		onShow() {
      console.log('message-onShow')
			this.$nextTick(()=>{
				uniIm.utils.setTabBarBadge(2, this.unreadMsgCount)
			})
		},
		watch: {
			unreadMsgCount: {
				handler(unreadMsgCount) {
					// #ifdef APP
					plus.runtime.setBadgeNumber(unreadMsgCount)
					// #endif
					uniIm.utils.setTabBarBadge(2, unreadMsgCount)
					// 调用扩展点，更新未读消息总数。
					uniIm.extensions.invokeExts('ui-update-unread-count', unreadMsgCount)
				},
				immediate: true,
			}
		},

		data() {
			return {
				
			}
		},
		onLoad() {
			const {tokenExpired} = uniIm.currentUser
			if (tokenExpired < Date.now()) {
				uni.navigateTo({
					url:'/pages/login/login'
				})
				return
			}
			uniIm.onInitDataAfter(()=>{
			  // 执行当前页面初始化
			  this.init()
			})
		},
		methods: {
			onleyClick(){
				uni.navigateTo({
				  url: '/uni_modules/uni-im/pages/chat/chat?conversation_id=single_5677f8ee6d50bd383f8e22d5c1f16f0d',
				  animationDuration: 300
				})
			},
			async lpress(cid){
				let conversation = await uniIm.conversation.get(cid)
				await conversation.hide()
				uniIm.conversation.remove(cid)
			},
			async init(){
				if( this.conversationList.length < 30 ){
					await this.$nextTick()
					await this.loadMore()
				}
			},
			remove(cid){
				let that = this
				uni.showModal({
					title: '删除会话',
					content: '确定要删除吗？',
					success: (res) => {
						if (res.confirm) {
							that.lpress(cid)
				        }
				    }
				});
				
			},
			search(){
				uni.navigateTo({
					url:'/pages/search/search'
				})
			},
			async loadMore() {
			  let data = await uniIm.conversation.loadMore()
			  return data
			},
			goLogin(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			toChat(cid){
				// single_5677f8ee6d50bd383f8e22d5c1f16f0d
				uni.navigateTo({
				  url: '/uni_modules/uni-im/pages/chat/chat?conversation_id=' + cid,
				  animationDuration: 300
				})
			},
      goUrl(urlPages) {
        if (!this.loginState) {
          uni.showToast({
            title: '未登录，请先登录！',
            icon: 'none'
          })
          setTimeout(() => {
            uni.navigateTo({
              url: '/pages/login/login'
            })
          }, 1500)
        } else {
          uni.navigateTo({
            url: urlPages
          })
        }
      },
		}
	}
</script>

<style scoped>
	.avatar{
		padding-top: 22rpx;
		padding-bottom: 22rpx;
		padding-left: 30rpx;
		padding-right: 25rpx;
		
	}
	.info-num{
		position:absolute;
		top: 10rpx;
		right: 10rpx;
		height: 36rpx;
		min-width: 36rpx;
		border-radius: 36rpx;
		background-color: #ff584c;
		z-index: 10;
	}
	.callinfo{
		height: 144rpx;
		padding-right: 30rpx;
		border-bottom: solid 1px #ececec;
	}
	button::after{ border: none!important;}
</style>